<script>
export default {
  name: "LeftMenu",
  props: {},  //只读属性，外部传入值
  emits: [], //声明要触发的事件
  provide: {}, //声明-向后代透传数据
  inject: [], //注入上层组件提供的数据
  components: {
    //子组件
  },
  data() {
    return {
      //单字段变量+对象变量+数组变量
      openKeys2: ["7"],
      selectedKey: "1",
      collapse: false,
      isTree: true
    }
  },
  methods: {
    //选中菜单回调
    changeSelectedKey(selectedKey) {
      this.selectedKey = selectedKey;
      console.log(this.selectedKey);
    },
    //展开目录回调
    changeOpenKeys(openKeys2) {
      this.openKeys2 = openKeys2;
      console.log(openKeys2);
    },
    goMenuRoute(val){
      console.log(val);
      // this.$router.push(val);
      this.$router.push({name:val});
    }
  },
  computed: {
    //计算属性
  },
  watch: {
    //监听器
  },
  created() {
    //在组件实例处理完所有与状态相关的选项后调用
  },
  mounted() {
    //在组件被挂载之后调用
  },
  updated() {
    //在组件因为一个响应式状态变更而更新其 DOM 树之后调用
  },
  unmounted() {
    //在一个组件实例被卸载之后调用
  }
}
</script>

<template>
  <div style="height: 100%;background-color: #393d49">

    <lay-menu v-model:selected-key="selectedKey" v-model:tree="isTree" v-model:open-keys="openKeys2"
              @change-selected-Key="changeSelectedKey" @change-open-keys="changeOpenKeys"
              :collapse="collapse">
      <lay-menu-item id="1" @click="goMenuRoute('p1')">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon>
        </template>
        <template #title>
          首页1
        </template>
      </lay-menu-item>
<!--      <lay-menu-item id="2" @click="goMenuRoute('/work/p2')">-->
      <lay-menu-item id="2" @click="goMenuRoute('p2')">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon>
        </template>
        <template #title>
          首页2
        </template>
      </lay-menu-item>
      <lay-menu-item id="3" @click="goMenuRoute('p3')">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon>
        </template>
        <template #title>
          首页3
        </template>
      </lay-menu-item>
      <lay-sub-menu title="目录" id="7">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon>
        </template>
        <template #title>
          dir1
        </template>
        <lay-menu-item id="8" @click="goMenuRoute('p8')">
          <template #icon>
            <lay-icon type="layui-icon-home"></lay-icon>
          </template>
          <template #title>
            首页8
          </template>
        </lay-menu-item>
        <lay-menu-item id="9">
          <template #icon>
            <lay-icon type="layui-icon-home"></lay-icon>
          </template>
          <template #title>
            首页9
          </template>
        </lay-menu-item>
        <lay-sub-menu id="10">
          <template #icon>
            <lay-icon type="layui-icon-home"></lay-icon>
          </template>
          <template #title>
            dir2
          </template>
          <lay-menu-item id="11">
            <template #icon>
              <lay-icon type="layui-icon-home"></lay-icon>
            </template>
            <template #title>
              首页11
            </template>
          </lay-menu-item>
          <lay-menu-item id="12">
            <template #icon>
              <lay-icon type="layui-icon-home"></lay-icon>
            </template>
            <template #title>
              首页12
            </template>
          </lay-menu-item>
          <lay-sub-menu id="13">
            <template #icon>
              <lay-icon type="layui-icon-home"></lay-icon>
            </template>
            <template #title>
              dir3
            </template>
            <lay-menu-item id="14">
              <template #icon>
                <lay-icon type="layui-icon-home"></lay-icon>
              </template>
              <template #title>
                首页14
              </template>
            </lay-menu-item>
            <lay-menu-item id="15">
              <template #icon>
                <lay-icon type="layui-icon-home"></lay-icon>
              </template>
              <template #title>
                首页15
              </template>
            </lay-menu-item>
            <lay-menu-item id="16">
              <template #icon>
                <lay-icon type="layui-icon-home"></lay-icon>
              </template>
              <template #title>
                首页16
              </template>
            </lay-menu-item>
          </lay-sub-menu>
        </lay-sub-menu>
      </lay-sub-menu>
    </lay-menu>
  </div>
</template>

<style scoped>

</style>